<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../mdui/css/mdui.min.css">
    <script defer src="../mdui/js/mdui.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/qs.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/vue.js"></script>

    <style>
        .mdui-table mdui-table-hoverable {
            width: 1400px;
        }
    </style>

</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-green">

<div class="mdui-container-fluid" id="app">
    <h1 class="mdui-text-color-theme">用户列表</h1>
    <div style="margin-bottom: 8px;">
        姓名: <input v-model="name" type="text" placeholder="请输入姓名">
        性别:<select v-model="gender">
        <option value="-1">-</option>
        <option value="0">女</option>
        <option value="1">男</option>
    </select>
        生日&nbsp;&nbsp;
        开始：<input type="date" v-model="start">
        结束：<input type="date" v-model="end">
        <button @click="findUsers" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-blue-700">查询</button>
        <button @click="reset" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-blue-700">重置</button>
    </div>

    <div style="margin-bottom: 9px;">
        <a href=" add.html
    " class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">新增用户</a>
        <button @click="deleteItems" class="mdui-btn mdui-color-theme-accent mdui-ripple">批量删除</button>
    </div>
    <div style="width: 1400px">
        <table class="mdui-table mdui-table-hoverable" width="1400px">
            <thead style="width: 1400px">
            <tr>
                <th>
                    <label class="mdui-list-item mdui-ripple">
                        <div class="mdui-checkbox">
                            <input type="checkbox" @change="selectAll($event)"/>
                            <i class="mdui-checkbox-icon"></i>
                        </div>
                        <div class="mdui-list-item-content">全选</div>
                    </label>

                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>登录名</th>
                <th>性别</th>
                <th>生日</th>
                <th>邮箱</th>
                <th>部门</th>
                <th>电话</th>
                <th>角色</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody style="width: 1400px">
            <tr v-for="(u,index) in users">
                <td>
                    <label class="mdui-list-item mdui-ripple">
                        <div class="mdui-checkbox">
                            <input class="item" type="checkbox" :value="u.id"/>
                            <i class="mdui-checkbox-icon"></i>
                        </div>
                    </label>
                </td>
                <td>{{u.id}}</td>
                <td>{{u.name}}</td>
                <td>{{u.loginName}}</td>
                <td>{{u.gender |fmtGenter}}</td>
                <td>{{u.birthday}}</td>
                <td>{{u.email}}</td>
                <td>{{u.depaerment.dname}}</td>
                <td>{{u.phone}}</td>
                <td>{{u.role.roleName}}</td>

                <td>
                    <span v-if="!u.disabled" style="color: #00c853;">
                        正常
                    </span>
                    <span v-else style="color: red;">
                        已禁用
                    </span>
                </td>
                <td>
                    <a :href="'edit.html?id='+u.id"
                       class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
                        <i class="mdui-icon material-icons">edit</i>
                    </a>
                    <button @click="deleteUser(u.id,index)"
                            class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
                        <i class="mdui-icon material-icons">delete</i>
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>


</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            start: '',
            end: '',
            gender: -1,
            name: '',
            users: [],
        },
        created() {
            // let _this = this;
            // axios
            //     .get("/user/myDepartmentlist")
            //     .then(function (res) {
            //         _this.users = res.data;
            //     })
            // //this.findUsers();
            // //
            // //

            this.findUsers();
        },

        filters: {

            fmtGenter(val) {
                return val == 1 ? "男" : "女";
            }
        },
        methods: {
            findusers() {
                let _this = this;
                axios
                    .get("/user/list")
                    .then(function (res) {
                        _this.users = res.data;
                    })
            },

            deleteItems() {
                let arr = [];//存放选项中的ID
                let items = document.getElementsByClassName("item");//获取手所有的checkbox
                for (let i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        arr.push(items[i].value)
                    }
                }
                // console.log(arr)
                if (arr.length == 0) {
                    mdui.alert("请选择删除的行")
                    return
                }
                let _this = this
                axios.delete("/user/remove?ids=" + arr.toString())
                    .then(function (res) {
                        if (res.data) {
                            mdui.alert("批量处理成功")
                            for (i = 0; i < arr.length; i++) {
                                _this.users.splice(index, i)
                            }
                            _this.findUsers();//更新列表
                        }
                    })
            },
            selectAll(event) {
                let checked = event.target.checked;
                // console.log(checked)
                let items = document.getElementsByClassName("item");//获取手所有的checkbox

                //设置所有的都为checked
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = checked;
                }
            },
            reset() {
                this.id = '';
                this.place = ''
            },
            deleteUser(uid, index) //uid传到后台后台正确删除后 根据index移除数组中对应的数据
            {
                let _this = this;
                axios.delete("/user/deleteUser/" + uid)
                    .then(function (res) {
                        if (res.data.success) {
                            _this.users.splice(index, 1)
                            mdui.alert("删除成功");
                        }
                    })
            },
            //根据条件查询
            findUsers() {
                console.log(this.name)
                let _this = this
                axios.get("/user/findByname", {
                    params: {
                        name: this.name,
                        gender: this.gender,
                        start: this.start,
                        end: this.end,
                    }
                })
                    .then(function (res) {
                        _this.users = res.data;
                    })
            }
        },
    })
</script>


</body>
</html>